<template>
  <div class="component-library">
    <div class="library-header">
      <h3>组件库</h3>
      <el-input
        v-model="searchText"
        placeholder="搜索组件"
        size="small"
        clearable
        prefix-icon="Search"
      />
    </div>

    <div class="library-content">
      <el-collapse v-model="activeCategories">
        <el-collapse-item
          v-for="category in filteredCategories"
          :key="category.key"
          :title="category.title"
          :name="category.key"
        >
          <div class="component-grid">
            <div
              v-for="component in category.components"
              :key="component.type"
              class="component-item"
              draggable="true"
              @dragstart="handleDragStart($event, component)"
              @click="addComponent(component)"
            >
              <div class="component-icon">
                <el-icon>
                  <component :is="component.icon" />
                </el-icon>
              </div>
              <div class="component-name">{{ component.name }}</div>
              <div class="component-description">{{ component.description }}</div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useEditorStore } from '@/stores/editor'
import { getComponentCategories } from '@/config/componentLibrary'

const editorStore = useEditorStore()

// 搜索文本
const searchText = ref('')

// 展开的分类
const activeCategories = ref(['basic', 'form', 'layout', 'chart'])

// 组件分类数据
const categories = getComponentCategories()

// 过滤后的分类
const filteredCategories = computed(() => {
  if (!searchText.value) {
    return categories
  }

  return categories.map(category => ({
    ...category,
    components: category.components.filter(component =>
      component.name.includes(searchText.value) ||
      component.description.includes(searchText.value)
    )
  })).filter(category => category.components.length > 0)
})

// 拖拽开始
const handleDragStart = (event, component) => {
  event.dataTransfer.setData('application/json', JSON.stringify({
    type: 'component',
    componentType: component.type
  }))
  event.dataTransfer.effectAllowed = 'copy'
}

// 直接添加组件
const addComponent = (component) => {
  // 在画布中心添加组件
  const position = {
    x: Math.random() * 300 + 100,
    y: Math.random() * 200 + 100
  }
  editorStore.addComponent(component.type, position)
}
</script>

<style lang="scss" scoped>
.component-library {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #e4e7ed;
}

.library-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;

  h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
}

.library-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;

  .el-collapse {
    border: none;

    :deep(.el-collapse-item__header) {
      background: #f8f9fa;
      border: none;
      padding-left: 16px;
      font-weight: 500;
      color: #606266;
    }

    :deep(.el-collapse-item__content) {
      padding: 12px 8px;
    }
  }
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.component-item {
  padding: 12px 8px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  background: #fff;
  user-select: none;

  &:hover {
    border-color: #409eff;
    background: #f0f8ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  }

  &:active {
    transform: translateY(0);
  }
}

.component-icon {
  margin-bottom: 8px;

  .el-icon {
    font-size: 24px;
    color: #409eff;
  }
}

.component-name {
  font-size: 12px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.component-description {
  font-size: 11px;
  color: #909399;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 拖拽时的样式
.component-item[draggable="true"] {
  &:hover {
    cursor: grab;
  }

  &:active {
    cursor: grabbing;
  }
}
</style>
